<template>
	<view>

		<u-sticky bgColor="#fff">
			<u-tabs style="background-color: #ffffff;border-bottom:1px solid #d4cece6b;" :current="tabActive"
				:list="list4" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" :scrollable="false"
				:activeStyle="{
		                color: '#303133',
		                fontWeight: 'bold',
		                transform: 'scale(1.05)'
		              }" :inactiveStyle="{
		                color: '#606266',
		                transform: 'scale(1)'
		              }" itemStyle="width:16%; padding-left: 1px; padding-right: 1px; height: 34px;" @click="tabClick">
			</u-tabs></u-sticky>
		<movable-area>
			<waitAppointment v-if="currentTab === '预约中'"></waitAppointment>
			<waitpay v-if="currentTab === '待付款'"></waitpay>
			<waitReceive v-if="currentTab === '待收货'"></waitReceive>
			<waitEvaluate v-if="currentTab === '待评价'"></waitEvaluate>
		<movable-view :x="x" :y="y" direction="all" @change="movableChange">
			<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
				:direction="directionStr" @trigger="trigger" @fabClick="fabClick" />
		</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import waitpay from "@/pages/tabBar/my/wait/waitPay/waitPay.vue"
	import waitAppointment from "@/pages/tabBar/yuyue/details/result/list.vue"
	import waitReceive from "@/pages/tabBar/my/wait/waitReceive/waitReceive.vue"
	import waitEvaluate from "@/pages/tabBar/my/wait/waitEvaluate/waitEvaluate.vue"
	const lineBg =
		"";
	export default {
		mixins: [uni.$u.mixin],
		components: {
			waitpay,
			waitAppointment,
			waitReceive,
			waitEvaluate
		},
		data() {
			return {
				x: 0,
				y: 0,
				directionStr: '垂直',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#ff8f0f',
					buttonColor: '#ff8f0f',
					iconColor: '#fff',

				},
				vertical: 'bottom',
				horizontal: 'left',
				lineBg,
				currentTab: "预约中",
				list4: [{
					name: "预约中"
				}, {
					name: '待付款',

					// badge: {
					// 	isDot: true
					// }
				}, {
					name: '待收货',
				}, {
					name: '待评价'
				}],
				tabActive: 0
			}
		},
		onLoad(prop) {
			console.log(typeof Number(prop.index), 'jjj');
			if (prop.index) {

				this.tabActive = Number(prop.index)
				if (prop.index == 0) {
					this.currentTab = "预约中"
				} else if (prop.index == 1) {
					this.currentTab = "待付款"
				} else if (prop.index == 2) {
					this.currentTab = "待收货"
				} else {
					this.currentTab = "待评价"
				}

			} else {
				this.tabActive = 0
			}
		},
		methods: {
			movableChange() {},
			click(item) {
				console.log('item', item);
			},
			tabClick(item) {
				this.currentTab = item.name; // 切换当前选中的 tab
				console.log('item', item);
			},
			trigger(e) {
				// console.log(e)
				// this.content[e.index].active = !e.item.active
				// uni.showModal({
				// 	title: '提示',
				// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定')
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消')
				// 		}
				// 	}
				// })
			},
			fabClick() {
				uni.navigateTo({
					url: "/pages/test/test"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-page {
		padding-bottom: 500px;
	}

	/deep/uni-movable-area {
		height: 100% !important;
		width: 100% !important;
	}

	/deep/uni-movable-view {
		display: inline-block;
		width: auto !important;
		top: 50%!important;
		height: auto !important;

		left: 0;
		z-index: 1000;
	}
</style>